<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <title>与木共舞板材网-发布</title>
    <link rel="stylesheet" href="../../css/weui.css">
    <link rel="stylesheet" href="../../css/reset.css">
    <link rel="stylesheet" href="../../css/iconfont.css">
    <link rel="stylesheet" href="../../css/main.css">
    <script src="../../js/axios.min.js"></script>
    <script src="../../js/vue.js"></script>
</head>

<body>
    <section id="app">
        <div class="weui-cells_checkbox demand-push-checked">
            <div @click="selectSupply">
                <input type="checkbox" class="weui-check" :checked="checked">
                <i class="weui-icon-checked"></i>
                <p>供应</p>
            </div>
            <div @click="selectBuy">
                <input type="checkbox" class="weui-check" :checked="!checked">
                <i class="weui-icon-checked"></i>
                <p>求购</p>
            </div>
        </div>
        <div class="demand-push-item">
            <dl>
                <dt>标题</dt>
                <dd>
                    <input type="text" v-model="data.title" placeholder="请输入产品标题（不得超过20个汉字)" maxlength="200">
                </dd>
            </dl>
            <dl>
                <dt>描述</dt>
                <dd>
                    <div class="weui-cell__bd">
                        <textarea class="weui-textarea" v-model="data.describe" placeholder="请输入产品描述（不得超过200个汉字)"
                            maxlength="200" rows="4"></textarea>
                    </div>
                </dd>
            </dl>
            <dl>
                <dt>上传产品图片</dt>
                <p>最多上传4张产品图片</p>
                <div class="weui-cell__bd">
                    <div class="weui-uploader">
                        <div class="weui-uploader__bd">
                            <ul class="weui-uploader__files" id="uploaderFiles">
                                <!-- <li class="weui-uploader__file" style="background-image:   url(./images/pic_160.png)"></li> -->
                            </ul>
                            <div class="weui-uploader__input-box">
                                <input id="uploaderInput" class="weui-uploader__input" type="file" accept="image/*"
                                    multiple="">
                            </div>
                        </div>
                    </div>
                </div>
            </dl>
        </div>
        <div class="weui-cells weui-cells_form demand-push-form">
            <div class="weui-cell">
                <div class="weui-cell__hd"><label class="weui-label">联系人</label></div>
                <div class="weui-cell__bd">
                    <input class="weui-input" type="text" v-model="data.name" maxlength="20" placeholder="请输入您的姓名">
                </div>
            </div>
            <div class="weui-cell">
                <div class="weui-cell__hd"><label class="weui-label">手机号码</label></div>
                <div class="weui-cell__bd">
                    <input class="weui-input" type="number" v-model="data.phone" maxlength="11" placeholder="请输入手机号码">
                </div>
            </div>
            <div class="weui-cell">
                <div class="weui-cell__hd"><label class="weui-label">选择区域</label></div>
                <div class="weui-cell__bd" @click="selectAddress">
                    <p style="color:#999">请选择所在区域</p>
                </div>
            </div>
        </div>
        <div class="demand-push-submit" @click="publish"> 发布 </div>
        <aside>
            <z-dialog :show="isMsg" :msg="msg" @handle="handMsg"></z-dialog>
            <z-toast :show="isToast" :msg="toast"></z-toast>
        </aside>
    </section>
    <!-- js -->
    <aside>
        <script src="../../js/weui.min.js"></script>
        <script src="../../js/template.js"></script>
        <script>
            new Vue({
                el: '#app',
                data: {
                    isMsg: false,
                    msg: '',
                    isToast: false,
                    toast: '',
                    checked: true,
                    isAddress: false,
                    data: {
                        status: null,
                        title: '',
                        describe: '',
                        img: [],
                        name: '',
                        phone: '',
                        address: []
                    }
                },
                // mounted() {},
                methods: {
                    handMsg() {
                        this.isMsg = false
                    },
                    selectSupply() {
                        this.checked = true
                    },
                    selectBuy() {
                        this.checked = false
                    },
                    publish() {
                        const status = this._verify();
                        if (!status) return false;
                        this.data.status = this.checked ? 0 : 1
                        console.log(this.data)
                    },
                    selectAddress() {
                        let _this = this;
                        let provinces = [{
                                label: '山东',
                                value: 0
                            },
                            {
                                label: '河南',
                                value: 1
                            }
                        ]
                        let city = [{
                                label: '临沂',
                                value: 0
                            },
                            {
                                label: '日照',
                                value: 1
                            },
                            {
                                label: '青岛',
                                value: 2
                            }
                        ]
                        weui.picker(provinces, city, {
                            onChange(e) {
                                // console.log(e)
                            },
                            onConfirm(result) {
                                _this.data.address = result;
                            }
                        });
                    },
                    _verify() {
                        // title: '',
                        // describe: '',
                        // img: [],
                        // name: '',
                        // phone: '',
                        // address: []
                        let regPhone = /^1(3|4|5|7|8)\d{9}$/;
                        let data = this.data;
                        if (!data.title) return this._feedback('内容的标题不得为空');
                        if (!data.describe) return this._feedback('产品描述不得为空');
                        if (!data.name) return this._feedback('请输入您的姓名');
                        if (!data.phone) return this._feedback('请输入您的手机号码');
                        if (!regPhone.test(data.phone)) return this._feedback('您输入的手机号码格式不正确');
                        if (!data.address.length) return this._feedback('请选择您的所在区域');
                        return true;
                    },
                    _feedback(message) {
                        this.msg = message;
                        this.isMsg = true;
                    },
                    handMsg() {
                        this.isMsg = false
                    }

                },
            })
        </script>
    </aside>
    <!-- js -->
</body>

</html>